<template>
	<view>
		<view class="top-container">
			<view class="left-container">
				<image class="head" :src="UserInfo.UserAvatarURL" mode="aspectFill"></image>
			</view>
			<view class="right-container">
				<view class="line">
					<view class="big">{{UserInfo.RealName}}</view>
					<image class="sex" src="../../static/man.png"></image>
				</view>
				<view class="line">
					<view class="def">{{UserInfo.DepartmentName}}</view>
					<view class="def">{{UserInfo.RoleNames}}</view>
					<view class="exit" @click="toPage">
						<image src="../../static/exit.png"></image>退出
					</view>
				</view>
			</view>
		</view>
		<uni-section title="发票审批" type="line" padding>
			<uni-grid :column="3" :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<view class="footer">
			<image src="../../static/logo.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				UserInfo: {},
				list: [{
						url: '/static/g0.png',
						text: '我的待办',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/g1.png',
						text: '我的传阅',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/g2.png',
						text: '我的已办',
						badge: '99',
						type: "warning"
					}
				]
			}
		},
		onShow() {
			this.getUserData()
			this.getPendingSum()
		},


		methods: {
			change(e) {
				var {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++
				if (index === 0) {
					uni.navigateTo({
						url: '../pending/pending?Id=' + this.UserInfo.Id
					});
					// uni.showToast({
					// 	title: `点击第${index+1}个宫格`,
					// 	icon: 'none'
					// })
				}
				if (index === 1) {
					uni.navigateTo({
						url: '../Circulated/Circulated'
					});

				}
				if (index === 2) {
					uni.navigateTo({
						url: '../Done/Done'
					});

				}


			},
			getUserData() {
				this.$http('/Base_Manage/Home/GetOperatorInfo').then(res => {
					if (res.Success) {
						// console.log(res.Data.UserInfo);
						this.UserInfo = res.Data.UserInfo
					}
				})
			},
			getPendingSum() {
				this.$http('/InvoiceManagement/Inv_InvoiceApplyMain/GetOperatorInfoPendingSum').then(res => {
					if (res.Success) {
						this.changeBadge(res.Data)
					}
				})
			},
			toPage() {
				uni.showModal({
					// 询问用户是否退出登录
					title: '退出登录',
					content: '您确定要退出登录吗?',
					success: res => {
						if (res.confirm) {
							//确定退出拿到token并清除token
							let TOKEN = uni.getStorageSync('缓存名称');
							uni.clearStorageSync();

							//退出成功！并跳转到其他页面
							uni.showToast({
								title: '退出成功',
								icon: 'success',
								duration: 500,
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login',
								});
							}, 1500);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			},
			changeBadge(nums) {
				this.list = [{
						url: '/static/g0.png',
						text: '我的待办',
						badge: nums[0],
						type: "primary"
					},
					{
						url: '/static/g1.png',
						text: '我的传阅',
						badge: nums[1],
						type: "success"
					},
					{
						url: '/static/g2.png',
						text: '我的已办',
						type: "warning"
					}
				]
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
		width: 100%;
		height: 100%;
	}

	.top-container {
		background: url(@/static/ybg.png)no-repeat center center;
		overflow: hidden;
		background-size: 100% 100%;
		width: 100%;
		min-height: 100%;
		background-repeat: no-repeat;
	}

	.left-container {
		float: left;
		width: 32vw;
		height: 200px;
	}

	.right-container {
		float: right;
		width: 67vw;
		height: 85px;
		margin-top: 84px;
	}

	.head {
		display: block;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-left: 20px;
		margin-top: 70px;
		border: 2px solid #fff
	}

	.line {
		display: block;
		line-height: 25px;
		color: #fff;
		overflow: hidden;
	}

	.big {
		float: left;
		font-size: 20px;
		margin-right: 4px;
	}

	.def {
		float: left;
		font-size: 14px;
		margin-right: 4px;
	}

	.sex {
		float: left;
		height: 14px;
		width: 14px;
		margin-right: 4px;
		margin-top: 10px
	}

	.exit {
		right: 0px;
		top: 140px;
		position: absolute;
		background: #F57C5E;
		height: 26px;
		line-height: 26px;
		text-align: center;
		width: 65px;
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
		overflow: hidden;
	}

	.exit image {
		float: left;
		height: 18px;
		width: 18px;
		margin-top: 4px;
		margin-left: 10px;
	}

	.grid {
		margin-right: 10px;
		margin-left: 10px;
		padding-bottom: 10px;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 12px;
		margin-top: 5px;
		color: #888;
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	.footer image {
		height: 130rpx;
		z-index: 1;
		position: fixed;
		bottom: 0;
		margin-left: 10%;

	}
</style>